<template>
	<view class="addlower">
		<view class="content">
			<view class="conitem">
				<view class="title">身份类型</view>
				<picker mode="selector" :range="picker.pickerArr" @change="pickerSel($event)">
					<view>{{picker.pickerTarget}}</view>
				</picker>
			</view>
			<view class="conitem">
				<view class="title">姓名</view>
				<input type="text" v-model="lowerinfo.username" placeholder="请输入姓名" />
				<image v-show="lowerinfo.username" src="../../static/img/ic_delete.png"
				 @click="clearinput('username')"></image>
			</view>
			<view class="conitem">
				<view class="title">手机号码</view>
				<input type="number" v-model="lowerinfo.mobile" placeholder="请输入手机号码" />
				<image v-show="lowerinfo.mobile" src="../../static/img/ic_delete.png"
				 @click="clearinput('mobile')"></image>
			</view>
			<view class="conitem conitem_vercode">
				<view class="title">手机验证码</view>
				<input type="number" v-model="lowerinfo.code" placeholder="请输入手机验证码" />
				<image v-show="lowerinfo.code" src="../../static/img/ic_delete.png"
				 @click="clearinput('code')"></image>
				<view class="vercodeBtn" :class="{vercodeBtn_grey:code.currentState==1}"
				 @click="sendsmsFun()">{{code.codeState[code.currentState]}}</view>
			</view>
			<view class="conitem">
				<view class="title">默认密码</view>
				<input type="password" v-model="lowerinfo.password" placeholder="请输入密码" />
				<image v-show="lowerinfo.password" src="../../static/img/ic_delete.png"
				 @click="clearinput('password')"></image>
			</view>
		</view>
		<button type="primary" @click="addaidLogic()">添加</button>
	</view>
</template>

<script>
	import { sendsms,useradd } from '../../api/index.js'
	export default {
		data() {
			return {
				picker:{ //选择器数据
					pickerArr:['业务员','代理商'],
					pickerTarget:'业务员'
				},
				code:{
					currentState:0,
					codeState:{
						0:"获取验证码",
						1:"重新获取60S",
						2:"再次获取"
					}
				},
				lowerinfo:{
					type:'salesman', //身份类型
					mobile:'', //手机号码
					username:'',//姓名
					password:'',//密码
					code:'' //验证码
				}
			}
		},
		onLoad:function(data){
			console.log(data);
		},
		methods: {
			pickerSel:function(e){
				let that = this;
				this.picker.pickerTarget = this.picker.pickerArr[e.detail.value];
				e.detail.value == "业务员"?that.lowerinfo.type = "salesman":that.lowerinfo.type = "agency";
			},
			//清除输入框内容
			clearinput:function(id){
				this.lowerinfo[id] = '';
			},
			//获取验证码
			async sendsmsFun(){
				let that = this;
				if(that.code.currentState == 1){
					uni.showToast({
					  title: '倒计时结束后再获取',
					  icon: 'none'
					})
					return ;
				}
				try{
					if(!(that.lowerinfo.mobile)){
						uni.showToast({
						  title: '请输入手机号码',
						  icon: 'none'
						})
						return ;
					}
					let data = await sendsms({mobile:that.lowerinfo.mobile,type:1});
					uni.showToast({
						title:data.msg,
						icon: 'none'
					});
					if(data.code == 0){
						that.code.currentState = 1;
						let num = 60;
						let inter = setInterval(function(){
							num--;
							console.log(num);
							that.code.codeState[1] = "重新获取"+num+"S";
							if(num<1){
								that.code.currentState = 2;
								window.clearTimeout(inter);
							}
						},1000);
					}
				}catch(e){
					//TODO handle the exception
					console.log(e)
				}
			},
			//添加业务员逻辑
			addaidLogic:function(){
				let that = this;
				let text = this.formatLogic();
				console.log(text)
				if(!!text){
					uni.showToast({
						title:text,
						icon: 'none'
					});
				}else{
					let obj = {
						type:that.lowerinfo.type,		//agency/salesman(代理商/业务员)
						username:that.lowerinfo.username,//用户名		
						mobile:that.lowerinfo.mobile,//手机号		
						code:that.lowerinfo.code,//验证码		
						rate: {
						    "pay": {
						      "limit": "0",
						      "over": "0"
						    },
						    "activity": {
						      "wx": "0",
						      "zfb": "0"
						    }
						},//费率设置
						password:that.lowerinfo.password//	密码
					}
					console.log(obj)
					that.useraddFun(obj);
				}
			},
			//添加业务员的字段格式验证
			formatLogic:function(){
				let that = this;
				let text = '';
				if(that.lowerinfo.username.length>10){
					text = '姓名长度不可超过10个字符';
				}else if(!that.lowerinfo.username){
					text = '姓名不可为空';
				}else if(!(that.lowerinfo.mobile)){
					text = '手机号码不可为空';
				}else if(that.lowerinfo.code.length>6){
					text = '验证码格式错误';
				}else if(that.lowerinfo.password.length<6||that.lowerinfo.password.length>16){
					text = '密码格式错误';
				}
				return text;
			},
			useraddFun:function(obj){
				useradd(obj).then((res) => {
					uni.showModal({
						title:'提示',
						content: res.msg,
						complete:function(){
							if(res.code == 0){
								uni.navigateTo({
									url:'../mylower/mylower'
								})
							}
						}
					})
				}).catch((e) => {
					console.log(e);
				})
			}
		},
		components:{
			
		}
	}
</script>

<style lang="scss" scoped>
	.addlower{
		border-top: 1rpx solid $uni-solid-color;
		padding: 0 30rpx;
		font-size: $uni-font-size-base;
		.content{
			margin-bottom: 60rpx;
			.conitem{
				display: flex;
				border-bottom: 1rpx solid $uni-solid-color;
				padding: 30rpx 0;
				position: relative;
				align-items: center;
				&.conitem_vercode{
					input{
						width: 35%;
					}
				}
				.title{
					width: 200rpx;
				}
				input{
					font-size: $uni-font-size-base;
					width: 70%;
				}
				image{
					width: 36rpx;
					height: 36rpx;
					margin-left: 10rpx;
				}
				.vercodeBtn{
					position: absolute;
					right: 0;
					top: 30rpx;
					padding: 5rpx 10rpx;
					color: #007AFF;
					border: 1rpx solid #007AFF;
					text-align: center;
					min-width: 170rpx;
					border-radius: 40rpx;
					&.vercodeBtn_grey{
						color: #999999;
						border-color: #999999;
					}
				}
			}
		}
		button{
			font-size: $uni-font-size-lg;
		}
	}
</style>
